<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物流信息管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <link rel="stylesheet" href="css/bootstrap.css" >
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body
        background="img/bj.jpg"
        style="background-repeat:no-repeat;
               background-attachment:fixed;
               background-size:100% 100%;
               opacity:50;"
>
<div id="app">

    <div  v-if="addShow" style="width: 80% ; margin: 200px auto" >
        <!-- 新增表单   -->
        <div >
                <div class="form-group">
                    <label >物流单号</label>
                    <input type="text" class="form-control" v-model="addForm.wuliuNo" />
                </div>
                <div class="form-group">
                    <label >物流公司</label>
                    <input type="text" class="form-control" v-model="addForm.company" />
                </div>
                <div class="form-group">
                    <label >收件人</label>
                    <input type="text" class="form-control" v-model="addForm.geter"  />
                </div>
                <div class="form-group">
                    <label >快递员</label>
                    <input type="text" class="form-control" v-model="addForm.sender" />
                </div>
                <button type="submit" class="btn btn-primary" @click="addSave">保存</button>
                <button type="submit" class="btn btn-primary" @click="addFormShow">取消</button>
        </div>
    </div>



        <div style="width: 80% ; margin: 200px auto" v-if="!addShow">
            <button type="button" class="btn btn-primary" @click="addFormShow">新增</button>
            <select  v-model="searchSelect" >
                <option value="wuliuNo">物流单号</option>
                <option value="company">物流公司</option>
                <option value="geter">收件人</option>
                <option value="sender">快递员</option>
            </select>
            <input type="text"  v-model="searchInput" style="width: 80px"></input>
            <button type="button" class="btn btn-success" @click="getListData">搜索</button>
            <table class="table">
                <thead>
                <tr>

                    <th scope="col">物流单号</th>
                    <th scope="col">物流公司</th>
                    <th scope="col">收件人</th>
                    <th scope="col">快递员</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>

                <tr v-for="(item,index) in dataList" >

                    <td>{{item.wuliuNo}}</td>
                    <td>{{item.company}}</td>
                    <td>{{item.geter}}</td>
                    <td>{{item.sender}}</td>
                    <td>
                        <button type="button" class="btn btn-success btn-sm" @click="uodateForm(item)" >修改</button>
                        <button type="button" class="btn btn-danger btn-sm" @click="deleteData(item.id)">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>

            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" @click="upPage">上一页</a></li>
                    <li class="page-item"><a class="page-link" @click="downPage">下一页</a></li>
                </ul>
            </nav>
        </div>





</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            addShow: false,
            dataList: [],
            currentPage: 1,
            pageSize: 10,
            totalPages:0,
            searchInput:"",
            searchSelect:"",
            addForm:{
                id:"",
                wuliuNo:"",
                company:"",
                geter:"",
                sender:""
            }

        },
        methods:{
            deleteData(id){
                axios.delete("http://127.0.0.1:8081/deleteData/"+id);
                this.getListData();
            },
            uodateForm(item){
                console.log(item)
                this.addForm= {
                    id : item.id,
                    wuliuNo:item.wuliuNo,
                    company:item.company,
                    geter:item.geter,
                    sender:item.sender
                }
                this.addShow= !this.addShow
            },
            addSave(){
                console.log(this.addForm);
                axios.post("http://127.0.0.1:8081/add", this.addForm)
                    .then(res => {
                        this.addShow= !this.addShow;
                        this.getListData();
                    });
            },
            addFormShow(){
                this.addForm = {
                    id :"",
                    wuliuNo:"",
                    company:"",
                    geter:"",
                    sender:""
                }
                this.addShow= !this.addShow
            },
            getListData(){

                axios.get("http://127.0.0.1:8081/listData?pageSize="+ this.pageSize +"&currentPage="+this.currentPage+"&searchCol="+this.searchSelect+"&searchText="+this.searchInput)
                    .then(res =>{
                        this.dataList = res.data.data.content;
                        this.totalPages = res.data.data.totalPages;
                    })
            },
            upPage(){
                if(this.currentPage == 1) return;
                this.currentPage = this.currentPage -1 ;
                this.getListData();
            },
            downPage(){
                if(this.currentPage == this.totalPages) return;
                this.currentPage = this.currentPage + 1 ;
                this.getListData();
            }
        },
        mounted: function (){
            this.getListData();
        }
    })
</script>
</body>
</html>